@import "../base/fn";
.xianjin {
    padding-bottom: 6rem;   
    color: #fff; 
    background: #f2f2f2;
    .setTapColor();
    header{
        width: 100%;
        height: 30.31rem;
        background: url('../../../static/img/xianjin/bg1.png');
        background-size: 100% 100%;
        position: relative;
        .details{
            position: absolute;
            top: 58%;
            right: 1.2rem;
            width: 5.5rem;
            height: 1.1rem;                                 
        }
        .infos{
            position: absolute;
            left: 50%;
            bottom: .6rem;
            transform: translateX(-50%);            
            width: 80%;
            height: 8.99rem;            
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #ff9804;            
            >p{
                font-size: .7rem;
            }
            h2{
                font-size: .87rem;
                font-weight: 600;
                span{
                    font-size: 1.51rem;
                }
            }
            button{
                width: 11.5rem;
                height: 2.32rem;
                border: none;
                .gradientUp(#ffd100, #ff8b00);
                border-radius: 6px;
                margin-top: .46rem;
                a{
                    font-size: 1.1rem;
                    color: #fff;
                }
            }
        }
    }
    .head {
        .gradient(#ff0457, #ff790e);
        position: relative;
        border-radius: 0 0 80px 80px;
        .logo {
            width: 250px;
            padding: 20px 20px 0;
        }
        .buttons{
            text-align: center;
            padding-top: 20px;
            padding-bottom: 40px;
            .btn{
                .gradientUp(#ffd100, #ff8b00);
                padding: 8px 40px;
            }
        }
    }
    .summary {
        margin-top: 16px;
    }
    
    .drawer{            
        width: 95%;
        margin: 20px auto;
        background: #f2f2f2;
        border-radius: 10px;  
        color: #000;
        padding-bottom: 2rem;
        .total_income{
            width: 88%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;            
            padding: 14px 12px 14px 0;                 
            p{                
                align-self: flex-end;                
                color: #000;
                position: relative;
                background: #fe8326; 
                width: 4.5rem;
                height: 1.6rem;                
                text-indent: -5px;
                border-radius: 20px;  
                display: flex;
                align-items: center;
                justify-content: center;
                span{
                    position: absolute;
                    right: 12px;
                    top: 9px;
                    transform: translateY(-50%);
                    width: 8px;
                    height: 8px;                    
                    transform: rotate(45deg);
                    border-top: 1px solid #000;
                    border-right: 1px solid #000;
                }                             
            }
            h2{
                font-size: .87rem;
                color: #ff9804;
                font-weight: 600;
                margin-top: -2rem;
                .totals{
                    font-size: 1.51rem;
                }
            }
        }
        >h3{            
            font-size: 1.16rem;            
            padding: 2rem 0 1.1rem .64rem;                               
        }
        .data_lists{                                  
            .data_list{
                width: 98%;   
                margin: .78rem auto 0 auto;                                
                border-radius: 12px;                                            
                box-sizing: border-box;  
                background: #fff;              
                .infos{
                    padding: 16px 18px 0 18px;
                    display: flex;
                    align-items: center;                                                                                                   
                    .image{                                                
                        border-radius: 8px;                                                                                             
                        img{       
                           display: block;                                             
                           width: 5rem;                           
                        }
                    }                                       
                    .store_info{
                        padding: 0 1rem;
                        flex: 1;
                        h5{                                                        
                            font-size: 1rem;
                            color: #4b4b4b;                            
                            margin-bottom: .29rem;
                            padding-top: .29rem;
                            .ellipsisLn(1);                            
                        }
                        .info{
                            font-size: .87rem;
                            color: #c2c2c2;
                        }
                    }
                }
                .show_code{   
                    width: 100%;                                                                 
                    display: flex;                    
                    justify-content: center;
                    align-items: center;     
                    position: relative;                                  
                    padding: 12px 0;
                    margin-top: 16px;
                    &:after{
                        content: '';
                        position: absolute;
                        top: 0;
                        left: 0;
                        width: 100%;
                        height: 1px;
                        transform-origin: 0 0;
                        transform: scaleY(.5);
                        background: #d9d9d9;
                    }
                    img{                        
                        height: 1.5rem;
                    }
                    p{
                        font-size: .78rem;
                        color: #eb9732;
                        margin-left: 5px;   
                        text-align: center;                     
                    }
                    &:before{
                        .setLeftLine(#efeef8);
                    }
                } 
            }
        }
    }
    #action>h3{
        color: #000;
        padding: 1rem 0 1rem .64rem;
    }   
    #action {
        padding: 10px;
    }
    .table{
        background: url(../../img/baobao/7.png) no-repeat center;
        background-size: 100% 100% ;
        color: #FFFFFF;
        border: none;
    }
    .no_text{           
        font-size: 1rem;
        color: #666;
        text-align: center;
        display: none;      
    }
    .mask, .mask2{
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: rgba(0,0,0,.5);
        z-index: 999;
        display: none;
        .remind{
            position: fixed;            
            left: 50%;
            top: 45%;
            transform: translate(-50%, -50%);
            width: 85%;
            height: 24rem;
            background: #fff;
            z-index: 9999;
            border-radius: 10px;
            .r_top{
                height: 50%;
                background: linear-gradient(to right, #f84c44, #ff7f0a);
                border-radius: 10px 10px 0 0;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                img{
                    height: 3.83rem;                    
                }
                p{
                    color: #fff;
                    margin-top: 10px;
                }
            }
            .r_bottom{
                height: 50%;
                color: #1f1f1f;
                padding: 0 8%;
                h6{
                    font-size: .8rem;
                    color: #e73b11;
                    margin-top: 13px;
                }
                p{
                    font-size: .8rem;                    
                    margin: 13px 0 0 30px;                    
                    position: relative;
                    &:after{
                        content: '';
                        position: absolute;
                        left: -18px;
                        top: 50%;
                        transform: translateY(-50%);
                        width: 8px;
                        height: 8px;
                        background: #e9502a;
                        border-radius: 50%;
                    }
                }
                .btns{
                    display: flex;                    
                    justify-content: center;
                    margin-top: 25px;
                    .cancels,.goes,.cancels2,.goes2{
                        border: none;
                        width: 6.5rem;
                        height: 2rem;
                        line-height: 2rem;
                        text-align: center;
                        font-size: 1rem;
                        color: #fff;
                        border-radius: 20px;
                        margin: 0 10px;
                    }
                    .cancels,.cancels2{
                        background: #d0c8c6;
                    }
                    .goes,.goes2{
                        background: #e94f29;
                    }
                }
            }
        }
    }
    .mask3{
        position: fixed;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: rgba(0,0,0,.8);
        z-index: 999;
        visibility: hidden;                
        .remind{
            padding-top: 12%;
            h5{
                text-align: center;
                font-size: 1.2rem;
                color: #fff;
            }
            .saves{
                display: flex;
                flex-direction: column;
                align-items: center;
                margin-top: 15px;
                h6{
                    font-size: 1rem;
                    color: #fff;
                }
                p{
                    font-size: 1rem;
                    color: #fbde26;
                    margin: .9rem 0;
                }
                button{
                    width: 8rem;
                    height: 2.2rem;
                    line-height: 2.2rem;
                    font-size: 1rem;
                    color: #cd062c;
                    text-align: center;
                    background: #fbd225;
                    border: none;
                    border-radius: 4px;
                }
            }
        }
    }
}